<!-- 资产装置信息的表格 -->
<template>
  <div class="q-pa-md bg-white" id="current_wran_info">
    <q-table flat title="Treats" :rows="dataList" :columns="columns" no-data-label="暂无数据" no-results-label="过滤器没有发现任何结果"
      row-key="name" v-model:pagination="pagination" hide-pagination :loading="loading" binary-state-sort>
      <!-- 表格的加载状态 -->
      <template v-slot:loading>
        <q-inner-loading showing color="grey" />
      </template>
      <!-- 表格顶部 -->
      <template v-slot:top>
        <div></div>
        <q-space />
        <q-btn class="q-mr-sm q-mt-xs borderRadius" unelevated padding="8px 8px 7px" color="primary"
          @click="handlerAlleal" label="全部标记为已读" />
        <q-btn flat round dense :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
          @click="toggleFullscreen" class="q-mt-xs" />
      </template>
      <!-- 无数据提示信息 -->
      <template v-slot:no-data="{ message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <span>
            {{ message }}
          </span>
        </div>
      </template>
      <!-- 表格头部 -->
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
            <q-icon v-if="col.isSort" class="cursor-pointer" size="18px"
              :name="pagination.descending ? 'expand_less' : 'expand_more'" @click="handlerSort"></q-icon>
          </q-th>
        </q-tr>
      </template>
      <!-- 表格主体 -->
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <span v-if="col.name !== 'btn'">{{ col.value }}</span>
            <q-btn v-else size="md" unelevated class="q-mr-xs" padding="0 10px"
              :class="themeColor.primary === '#00CBED' ? 'meijia-ebit-detail-style' : 'ebit-detail-style'"
              @click="handlerDeleteSensor(props.row)" dense>
              标记为已读
            </q-btn>
          </q-td>
        </q-tr>
      </template>

    </q-table>
    <!-- 分页 -->
    <Pagination :pageSizes="['10条/页', '20条/页', '30条/页', '50条/页']" @updatePage="updatePage" @updateSizes="updateSizes"
      :pagination="pagination" @handlerRefresh="handlerRefresh" />
  </div>
  <!-- 删除 提示框 -->
  <DeleteDialog :isShowDelete="isShowDelete" :tipInfo="'确定告警信息标记为已读吗？'" @closeDeleteDialog="closeDeleteDialog"
    @confirmDelete="confirmDelete" />

</template>

<script>
import { ref } from 'vue'
import { featchEventList, updateWarnEvent, updateAllWarnEvent } from 'src/api/eventWarn'
import DeleteDialog from 'src/components/deleteDialog/index'
import Pagination from 'src/components/pagination'
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      dataList: [],

      columns: [
        { name: 'idIndex', required: true, label: 'ID', align: 'center', field: 'idIndex', isSort: true },
        { name: 'title', required: true, label: '标题', align: 'center', field: 'title' },
        { name: 'content', align: 'center', label: '内容', field: 'content' },
        { name: 'create_time', align: 'center', label: '创建时间', field: 'create_time' },
        { name: 'btn', align: 'center', label: '操作', field: 'btn' },
      ],
      pagination: { // 分页
        sortBy: 'desc', // 列名
        descending: true, // 是否按照降序排序
        page: 1, // 页码（当前显示第几页的数据）
        rowsPerPage: 10, // 每页多少行
        rowsNumber: 10 // 共多少条
      },
      queryList: {
        page: 1,
        page_size: 10,
        ordering: 'id'
      },
      loading: false, // 表格的加载状态
      isShowDelete: false
    };
  },

  components: {
    DeleteDialog,
    Pagination
  },

  computed: {
    ...mapGetters(['themeColor'])
  },

  watch: {
  },

  mounted() {
    this.getList()
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.pagination = { // 分页
        sortBy: 'desc', // 列名
        descending: true, // 是否按照降序排序
        page: 1, // 页码（当前显示第几页的数据）
        rowsPerPage: 10, // 每页多少行
        rowsNumber: 10 // 共多少条
      },
        this.queryList = {
          page: 1,
          page_size: 10,
          ordering: 'id'
        },
        this.getList()
    },
    /**
     * 排序
     */
    handlerSort() {
      this.pagination.descending = !this.pagination.descending
      this.getList()
    },
    /**
     * 获取当前告警信息列表
     */
    getList() {
      this.loading = true
      this.queryList.page = this.pagination.page
      this.queryList.page_size = this.pagination.rowsPerPage
      this.queryList.ordering = this.pagination.descending ? '-create_time' : 'create_time'
      this.queryList.is_read = 'False'
      this.queryList.receiver_id = localStorage.getItem('user_id_ccims')

      featchEventList(this.queryList).then(res => {
        if (res) var { status, data, totalCounts } = res
        if (status === 200) {
          this.dataList = []
          if (data && data.length > 0) {
            data.forEach((item, index) => {
              if (item.create_time) item.create_time = item.create_time.substr(0, 10) + ' ' + item.create_time.substr(11, 8)
              // 处理序号
              if (!this.pagination.descending) {
                item.idIndex = index + 1 + (this.queryList.page - 1) * this.queryList.page_size
              } else {
                item.idIndex = totalCounts - index - (this.queryList.page - 1) * this.queryList.page_size
              }
              this.dataList.push({
                id: item.id,
                idIndex: item.idIndex,
                title: item.title,
                content: item.content,
                create_time: item.create_time,
                receiver_name: item.receiver_name
              })
            })
          }
          this.pagination.rowsNumber = totalCounts
        }
        this.loading = false
      }).catch(error => {
        this.loading = false;
      })
    },
    /**
     * 全部标记为已读
     */
    handlerAlleal() {
      this.isShowDelete = true
      this.allread = true
    },
    /**
     * 打开是否标记为已读提示框
     */
    handlerDeleteSensor(val) {
      this.isShowDelete = true
      this.allread = false
      if (val) this.deleteId = val.id
    },
    /**
     * 标记为已读
     */
    confirmDelete() {
      if (!this.deleteId && this.allread) {
        updateAllWarnEvent().then(res => {
          const { status } = res
          if (status === 200) {
            this.isShowDelete = false
            this.getList()
            this.$q.notify({
              type: 'positive',
              position: 'top',
              message: '已全部标记为已读'
            })
          }
        })
        return
      }
      updateWarnEvent(this.deleteId, { is_read: true }).then(res => {
        const { status, msg } = res
        if (status === 200) {
          this.isShowDelete = false
          if (this.pagination.page > 1 && this.pagination.rowsNumber % this.pagination.rowsPerPage === 1) {
            this.pagination.page -= 1
          }
          this.deleteId = null
          this.getList()
        } else {
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: msg
          })
        }
      })
    },
    /**
     * 关闭删除提示框
     */
    closeDeleteDialog() {
      this.isShowDelete = false
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return
      this.pagination.page = val * 1
      this.getList()
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val)
      this.getList()
    },
    /**
     * 全屏
     */
    toggleFullscreen() {
      this.$nextTick(_ => {
        const dom = document.getElementById('current_wran_info')
        this.$q.fullscreen.toggle(dom).then(_ => {
        }).catch(error => {
          console.log(error)
        })
      })
    }
  }
}

</script>
<style lang='scss' scoped>
// 弹出的对话框样式
.dialog-form-container {
  ul {
    li {
      overflow: hidden;
      min-height: 42px;
      line-height: 42px;
      margin-bottom: 5px;

      &:nth-child(1) {
        margin-bottom: 25px;
      }

      &:nth-child(2) {
        margin-bottom: 25px;
      }

      >div {
        &:first-child {
          float: left;
          margin-right: 10px;
        }

        &:last-child {
          float: right;
          width: 200px;
        }
      }

      >span {
        &:first-child {
          float: left;
          margin-right: 10px;
        }

        &:last-child {
          float: right;
          width: 200px;
        }
      }
    }
  }
}
</style>
